body {
    padding: 0.5em 1em;
}

/** Map, etc.  */

#map-etc {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1em;
}
#map-etc > * {
    height: 80vh;
}

#map-etc .right-panel {
    display: grid;
}
#map-etc .right-panel #timeline-wrapper {
    overflow-y: scroll;
}

/** Draw Timeline */

#timeline {
    border-left: solid #ffa500 0.15em;
    margin-left: 0.6em;
}
/* list-style */
#timeline li {
    list-style: none;
}
#timeline li::before {
    margin-left: -0.58em;

    content: "";
    display: inline-block;
    height: 1em;
    width: 2em;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("./dot-circle-regular-derive.svg");
    background-position: left center;
    vertical-align: middle;
}
/* list item grid-display */
#timeline li {
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0.2em;
}

/** Footer  */

footer {
    margin: 2em 0;
}
